<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"
      layout:decorate="~{commonJs}" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>旅客管理系统</title>
    <link rel="stylesheet" href="/static/css/login.css"/>
    <style type="text/css">
        body, td, th {
            font-family: "Source Sans Pro", sans-serif;
        }

        body {
            background-color: #2B2B2B;
        }
    </style>

</head>
<body layout:fragment="content">

<div class="wrapper" id="login">

    <div class="container">
        <h1>欢迎进入旅客管理系统</h1>
        <form class="form">
            <input type="text" v-model="loginName" placeholder="用户名">
            <input type="password" v-model="password" placeholder="密码">
            <button type="button" id="login-button" v-on:click="login">登录</button>
        </form>
    </div>

    <ul class="bg-bubbles">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

<script type="text/javascript">
    /*$('#login-button').click(function(event){
        event.preventDefault();
        $('form').fadeOut(500);
        $('.wrapper').addClass('form-success');

    });*/

    var user = {loginName: '', password: ''};
    var vm = new Vue({
        el: '#login',
        data: user,
        methods: {
            details: function () {
                return this.site + " - 学的不仅是技术，更是梦想！";
            },
            login: function () {
                if (user.loginName == null || user.loginName == '') {
                    alert('请输入登陆名!');
                    return;
                }
                if (user.password == null || user.password == '') {
                    alert("请输入密码！");
                    return;
                }
                $.post("/login", user, function (data) {
                    if (data.msg == null || data.msg == "") {
                        location.href = "/admin/index";
                    } else {
                        alert(data.msg);
                    }
                });
            }
        }
    });
</script>
</body>
</html>